<template>
  <div class="about">
    <div id="vv">
      <div id="dvv">
        <el-form status-icon label-width="100px">
          <el-form-item label="账号" prop="pass">
            <el-input
              type="username"
              v-model="username"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="pass">
            <el-input
              type="password"
              v-model="password"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" id="bbttnn" @click="getname"
              >登录</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      username: "",
      password: "",
    };
  },
  mounted() {},
  methods: {
    getname() {
      this.$http("/users/login", "post", {
        userName: this.username,
        password: this.password,
      }).then((res) => {
        console.log(res.data.code);
        if (res.data.code == "001") {
          alert(res.data.msg);
          this.$store.commit("getname", this.username);
          this.$router.push("/home");
        } else {
          alert(res.data.msg);
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
#dvv {
  width: 500px;
  height: 300px;
  background-color: rgb(173, 171, 166);
  margin: auto;
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#bbttnn {
  width: 360px;
}
#vv {
  width: 100%;
  height: 500px;
  background: rgba(95, 93, 93, 0.459);
}
</style>
